/*取消浏览器默认的margin和padding，使demo在各浏览器里表现一致*/
* {
  margin: 0;
  padding: 0;
}

/*为了使block与body边界的距离为20px，这里给body设置10px的padding，加上block容器的10pxpadding，就保证了20px的间距*/
body {
  padding: 10px;
}

.block {
  height: 50px;
  width: 100%;
  border: 1px solid #999;
  background-color: #eee;
}

.row {
  width: 100%;
  float: left;
  clear: both;
}

[class^='col'] {
  box-sizing: border-box;
  height:auto;
  float: left;
  padding:10px;
}

/*when media size greater than 768px*/
@media screen and (min-width: 768px){
  .col-gt768-1{
    width: 8.33%;
  }
  .col-gt768-2{
    width: 16.66%;
  }
  .col-gt768-3{
    width: 25%;
  }
  .col-gt768-4{
    width: 33.33%;
  }
  .col-gt768-5{
    width: 41.66;
  }
  .col-gt768-6{
    width: 50%;
  }
  .col-gt768-7{
    width: 58.33%;
  }
  .col-gt768-8{
    width: 66.66%;
  }
  .col-gt768-9{
    width: 75%;
  }
  .col-gt768-10{
    width: 83.33%;
  }
  .col-gt768-11{
    width: 91.66%;
  }
  .col-gt768-12{
    width: 100%;
  }
}

/*when media size less than 768px*/
@media screen and (max-width: 768px){
  .col-lt768-1{
    width: 8.33%;
  }
  .col-lt768-2{
    width: 16.66%;
  }
  .col-lt768-3{
    width: 25%;
  }
  .col-lt768-4{
    width: 33.33%;
  }
  .col-lt768-5{
    width: 41.66;
  }
  .col-lt768-6{
    width: 50%;
  }
  .col-lt768-7{
    width: 58.33%;
  }
  .col-lt768-8{
    width: 66.66%;
  }
  .col-lt768-9{
    width: 75%;
  }
  .col-lt768-10{
    width: 83.33%;
  }
  .col-lt768-11{
    width: 91.66%;
  }
  .col-lt768-12{
    width: 100%;
  }
}